<template>
  <div>
    <el-row>
      <h2 class="text-left">第二种样式上传方法：</h2>
      <el-col :span="8" :offset="8">
        <div id="upload2">
          <!--elementui的form组件-->
          <el-form ref="form2" :model="form2" label-width="80px">
            <el-form-item label="活动名称">
              <el-input
                v-model="form2.name"
                name="names"
                style="width:360px;"
              ></el-input>
            </el-form-item>

            <el-form-item label-width="80px" label="上传图片">
              <!--elementui的上传图片的upload组件-->
              <el-upload
                　　
                class="upload-demo"
                　　action=""
                　　:limit="1"
                　　:auto-upload="false"
                　　:on-change="onchange2"
                　　:on-remove="handleRemove2"
                　　:file-list="fileList2"
                　　list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </el-form-item>
            <el-form-item style="padding-top:20px;">
              <el-button type="primary" @click="onSubmit2">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      fileList2: [],
      form2: {
        name: "",
      },
      params2: {},
    };
  },
  methods: {
    onchange2(file, filesList) {
      console.log(file, filesList);
      this.param2 = new FormData();
      this.param2.append("file", file.raw, file.name);
    },
    handleRemove2(file, filesList) {
      console.log(file, filesList);
      this.param2.delete("file");
    },
    onSubmit2() {
      //表单提交的事件
      var names = this.form2.name;
      //下面append的东西就会到form表单数据的fields中；
      this.param2.append("message", names);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      //然后通过下面的方式把内容通过axios来传到后台
      //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
      axios
        .post("http://localhost:3300/picture", this.param2, config)
        .then(function(result) {
          console.log(result);
        });
    },
  },
};
</script>
<style scoped lang="less">
.coverImage {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
